<template>
    <div class=" mx-8 mt-10">
        <div class=" flex justify-between">
            <h1 class=" text-lg text-default">Filters</h1>
            <a-button @click="checkoutLang" size="small"
                class=" text-xs bg-base text-white !rounded-md">切换prompt语言</a-button>
        </div>
        <ul class=" flex flex-wrap mt-3">
            <li v-for="item in tags" :key="item.id" @click="changeTags(item.id)"
                :class="{ 'active': params.tag_id == item.id }"
                class=" mr-2 mb-2 cursor-pointer text-xs px-2 border-[1px] border-gray-600 h-8 leading-8 text-center rounded-md">
                {{ item.name }}
            </li>

        </ul>
        <div class="grid grid-cols-4 gap-4 mt-4">
            <a-card v-for="item in data" :key="item.id" class=" !pb-8 !rounded-[10px] flex relative">
                <div class=" flex justify-between">
                    <h2 class=" text-default max-w-[150px]">
                        {{ item.name }}
                        <span class=" ml1">🔥{{ item.cpy_cnt / 1000 }}k</span>
                    </h2>
                    <div>
                        <heart-outlined @click="collect(item)" :class="{ 'text-pink-500': item.collect }"
                            class=" cursor-pointer mr-2 align-baseline" />
                        <a-button @click="copyText(item)" size="small" class=" text-xs">复制</a-button>
                    </div>
                </div>
                <p class="mt-2">👉<span class=" ml-1">{{ item.desc }}</span></p>
                <p class=" max-h-[300px] overflow-y-auto mt-4">{{ lang == 'cn' ? item.cn_content : item.en_content }}</p>
                <div class=" mt-2 absolute bottom-3 w-full">
                    <a-tag v-for="tag in item.tags" :key="tag.id">{{ tag.name }}</a-tag>
                </div>
            </a-card>
        </div>
        <a-pagination class=" !mt-3 !mb-6" @change="() => { getData() }" v-model:current="page.currentPage"
            v-model:page-size="page.pageSize" :total="page.totalResult" />
    </div>
</template>

<script lang='ts' setup>
import list from '@/hooks/list';
import { collectPrompts, getTags, prompts, uncollectPrompts } from '@/request/api';
import { HeartOutlined } from '@ant-design/icons-vue';
import { useClipboard } from '@vueuse/core';
import { message } from 'ant-design-vue';
const { text, isSupported, copy } = useClipboard()

let lang = ref<string>('cn')
let tags = ref<{ id: number, name: string }[]>([])
let selectTags = ref<Number[]>([])
let params = reactive<{ tag_id: number | undefined }>({
    tag_id: undefined
})

const changeTags = (id: number) => {
    params.tag_id = id
    getData()
}

const checkoutLang = () => {
    lang.value = lang.value == 'cn' ? 'en' : 'cn'
}

const copyText = (item: any) => {
    let content = lang.value == 'cn' ? item.cn_content : item.en_content
    if (isSupported.value) {
        copy(content)
    } else {
        const input = document.createElement('input');
        input.setAttribute('value', content);
        document.body.appendChild(input);
        input.select();
        document.execCommand('copy');
        document.body.removeChild(input);
    }
    message.success('复制成功！')
}

const collect = (item: any) => {
    if (!item.collect) {
        collectPrompts({ id: item.id }).then(res => {
            if (res.code == 200) {
                item.collect = true
                message.success('收藏成功！')
            }
        })
    } else {
        uncollectPrompts({ id: item.id }).then(res => {
            if (res.code == 200) {
                item.collect = false
                message.success('取消收藏成功！')
            }
        })
    }
}

onMounted(() => {
    getTags().then(res => {
        tags.value = res.result.tags
    })
})
const { data, page, getData, formRef, reset } = list<any>(params, prompts, 'prompts')

</script>
<style>
.active {
    @apply border-base bg-base text-white
}
</style>